<template>
    <div id="app">
        <div class="container">
            <div class="chart-box">
                <div class="btn-list">
                    <el-button
                        type="primary"
                        size="small"
                        @click="initLineChart"
                        >折线图</el-button
                    >
                    <el-button type="primary" size="small" @click="initBarChart"
                        >堆叠条形图</el-button
                    >
                </div>
                <ChartComponent
                    :line-data="lineData"
                    :bar-data="barData"
                    ref="chartComponentRef"
                ></ChartComponent>
            </div>
            <BasicGraph></BasicGraph>
            <Map></Map>
        </div>
    </div>
</template>

<script>
import BasicGraph from "./components/basicGraph.vue";
import ChartComponent from "./components/chartComponent.vue";
import Map from "./components/map.vue";
export default {
    name: "App",
    components: {
        BasicGraph,
        ChartComponent,
        Map,
    },
    data() {
        return {
            lineData: [],
            barData: [],
        };
    },
    mounted() {
        this.initLineChart();
        this.initBarChart();
    },
    methods: {
        initLineChart() {
            // 生成随机数据
            let data = [];
            for (let i = 0; i < 6; i++) {
                const temp = [];
                for (let j = 0; j < 7; j++) {
                    temp[j] = Math.round(Math.random() * 100);
                }
                data[i] = temp;
            }
            this.lineData = data;
            this.$nextTick(() => {
                this.$refs.chartComponentRef.initLineChart();
            });
        },
        initBarChart() {
            let data = [];
            // 生成随机数据
            for (let i = 0; i < 6; i++) {
                const temp = [];
                for (let j = 0; j < 7; j++) {
                    temp[j] = Math.round(Math.random() * 100);
                }
                data[i] = temp;
            }
            this.barData = data;
            this.$nextTick(() => {
                this.$refs.chartComponentRef.initBarChart();
            });
        },
    },
};
</script>

<style lang="less" scoped>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* text-align: center; */
    color: #2c3e50;
    margin-top: 20px;
}
</style>
